<template>
  <q-card class="props-area q-pa-sm fit overflow-auto no-padding">
    <div class="panel-header text-subtitle2 text-blue-grey-9" style="padding: 5px 15px;">图层面板</div>
    <!-- 图层面板 -->
    <q-scroll-area class="panel-body">
      <q-tree :nodes="[vnode]" node-key="uuid" label-key="type" default-expand-all>
        <template v-slot:default-header="prop">
          <div>
            <q-card class="bg-grey-3 q-pa-sm q-mr-md" v-if="!prop.node.children?.length || typeof prop.node.children === 'string'">
              <div class="text-subtitle2" v-if="typeof prop.node === 'string'">{{prop.node}}</div>
              <RenderByJson v-else :vnode="prop.node"></RenderByJson>
            </q-card>
            <div class="text-subtitle2" v-else>{{prop.node.type}}</div>
          </div>
        </template>
      </q-tree>
    </q-scroll-area>
  </q-card>
</template>

<script setup>
import { onBeforeMount, ref, watch } from 'vue';
import RenderByJson from "../RenderByJson/index.vue"

const props = defineProps({
  vnode: {
    default: () => ({})
  }
})
</script>

<style scoped lang="scss">
.panel-header {
  height: 32px;
  border-bottom: 1px solid #e5e5e5;
}
.panel-body {
  height: calc(100% - 32px);
}
</style>
